import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import {Link} from 'dva/router';
import {Button,Row,Col,Layout, Modal, Breadcrumb,Select,Icon,Form,Input,Affix,message,Upload,Cascader} from 'antd';
// import reqwest from 'reqwest';
import aStyle from '../../styles/App.less'
import style from '../../styles/ResetInput.less';
import inStyle from '../../styles/Info.less'
import {numvail,selectvail,mathvail,bankvail} from '../../utils/Validator.js'
// import {disabledStartDate,disabledEndDate} from '../../utils/Date.js'
import {role_case} from '../../models/Role.js';
import {reqwest_get,reqwest_post} from '../../utils/Reqwest.js'
// import CityPick from '../components/CityPick.js';
import {getBankBin} from 'bankcardinfo'
// import UpLoadGroup from '../components/UpLoadGroup.js';
const FormItem = Form.Item;
const Option =Select.Option;

class BankEdit extends React.Component{
	constructor(props){
		super(props);
		// this.edit=this.props.location.query.initv=='无敌'?JSON.parse(sessionStorage['edit']):null;
		this.state={
	    // list:[],
	    list:JSON.parse(window.sessionStorage['bank']),
	    previewVisible: false,
      previewImage: '',
      loading:false,
	    fileList:[],
		}
	}
	handleSubmit(e){
    e.preventDefault();
		console.log(this.state.fileList)
	  let _this = this;
    this.props.form.validateFields((err, values) => {
      console.log(values);
      if (!err) {
        reqwest_post('/api/users/update_bank_card',{
        	access_token:window.localStorage['token'],
        	id:_this.state.list.id,
        	bank_card:{code:values.bank_card,account:values.bank_name,branch:values.bank_branch,name:values.people_name}
        },(data)=>{
        	if(data.status=='success'){
        		message.success('更新成功',0.3,()=>{
        			window.location.hash='/app/bank_list?current='+this.props.location.query.current;
        		});
        	}else{
        		message.error(data.msg,0.3)
        	}
        });
      }
    });
	}
	componentWillMount(){
		console.log(sessionStorage['edit']);
	}
	// componentWillUnmount(){
	// 	window.sessionStorage.removeItem('bank')
	// }
	handleChange(e){
		// 6227003320240034988
		// 4392250804037942
		let _value=e.target.value
		console.log(_value)
		const { list }= this.state
		let _this = this;
		let _list = list
		if(_value.length===19){
			getBankBin(_value).then(function (data) {
				console.log(data);
				_list.account=data.bankName
				_this.setState({list:_list})
			}).catch(function (err) {
				console.log(err);
			})
		}
	}
	render(){
		const {startValue,endValue,endOpen,list,option} = this.state;

  	const {getFieldDecorator}=this.props.form;
		return(
			<Layout style={{background:'#fff'}}>
				<Form className={`${inStyle.ncc_left_layout}`} onSubmit={this.handleSubmit.bind(this)}>
					<Row>
						<Breadcrumb style={{ height:60,lineHeight:'60px',fontSize:14,marginTop:20}}>
              <Breadcrumb.Item>绑定银行卡</Breadcrumb.Item>
	       		</Breadcrumb>
	       	</Row>
	       	<Row >
	       		<Col className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:24,pull:3}} >
							<FormItem >
								{getFieldDecorator('people_name',{
									initialValue:list.name,
									rules:[{required:true,message:'请输入姓名'}]
								})(
									<Input className={`${style.ncc_reset_input}`} placeholder='持卡人姓名' />
								)}
							</FormItem>
						</Col>
					</Row>
					<Row >
	       		<Col className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:24,pull:3}} >
							<FormItem >
								{getFieldDecorator('bank_card',{
									initialValue:list.code.replace(/\s+/g,""),
									rules:[{required:true,validator:(rule,value,callback)=>{
										bankvail(rule,value,callback)
									}}]
								})(
									<Input type='bankCard' onChange={(e)=>{this.handleChange(e)}} className={`${style.ncc_reset_input}`} placeholder='银行卡号' />
								)}
							</FormItem>
						</Col>
					</Row>
					<Row >
	       		<Col className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:24,pull:3}} >
							<FormItem >
								{getFieldDecorator('bank_name',{
									initialValue:list.account,
									rules:[{required:true,message:'请输入银行名称'}]
								})(
									<Input className={`${style.ncc_reset_input}`} placeholder='银行名称' />
								)}
							</FormItem>
						</Col>
					</Row>
					<Row >
	       		<Col className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:24,pull:3}} >
							<FormItem >
								{getFieldDecorator('bank_brance',{
									initialValue:list.branch,
									rules:[{required:true,message:'请输入银行支行'}]
								})(
									<Input className={`${style.ncc_reset_input}`} placeholder='银行支行' />
								)}
							</FormItem>
						</Col>
					</Row>
       		<Row >
	       		<Col className={`${style.reset_col}`} push={1} >
							<FormItem >
			            <Button htmlType="submit" type="primary" >
			              提交
			            </Button>
		          </FormItem>
		          <FormItem >
			            <Button  >
			              取消
			            </Button>
		          </FormItem>
          </Col>
					</Row>
				</Form>
			</Layout>
		)
	}
}

const BankEditForm = Form.create()(BankEdit);

export default connect()(BankEditForm);
